<template>
	<view class="home">
		<view class="header">
			<view class="head-1">香哈菜谱大全</view>
			<view class="head-2">小白学做菜必备烹饪助手</view>
			<image src="../../static/@1/caipusousuo_slices/youcequyu.png"></image>
		</view>

		<view class="middle-box">
			<view class="myimg">
			</view>
			<swiper class="swiper" circular indicator-dots autoplay indicator-color="#fff" indicator-active-color="red">
				<swiper-item v-for="item in swipers" :key="item._id">
					<image :src="item.image_src"></image>
				</swiper-item>
			</swiper>
			<view class="menu-grid">
				<view class="menu-item" v-for="item in menus" :key="item._id">
					<image :src="item.image_src"></image>
					<text class="text-1">{{item.name}}</text>
				</view>
			</view>

			<view class="big-img">
				<view class="big-item-1">
					<image :src="floorData1.floor_imgs[0]"></image>
				</view>
				<view class="big-item-2">
					<view class="big-item-2-1">
						<image :src="floorData2.floor_imgs[0]"></image>
					</view>
					<view class="big-item-2-2">
						<image :src="floorData3.floor_imgs[0]"></image>
					</view>

				</view>
			</view>

			//首页底部

			<view class="big-bottom">
				<view class="bottom-item-1">
					<view>
						<image class="bottom-item-1-1" src="../../static/logo.png"></image>
					</view>
					<view>
						<text class="item-text">789</text>
					</view>
					<view class="sort-item">
						<view>
							<text>123</text>
							<image src="../../static/logo.png"></image>
						</view>
						<view>
							<text>456</text>
							<image src="../../static/logo.png"></image>
						</view>
					</view>
				</view>
				<view class="bottom-item-1">
					<view>
						<image class="bottom-item-1-1" src="../../static/logo.png"></image>
					</view>
					<view>
						<text class="item-text">789</text>
					</view>
					<view class="sort-item">
						<view>
							<text>123</text>
							<image src="../../static/logo.png"></image>
						</view>
						<view>
							<text>456</text>
							<image src="../../static/logo.png"></image>
						</view>
					</view>
				</view>
			</view>


		</view>





	</view>
</template>

<script>
	import {
		getSwiperApi,
		getMenusApi,
		getFloorDataApi,
		getMenuDataApi
	} from "@/apis/home.js"
	export default {
		data() {
			return {
				swipers: [],
				menus: [],
				floorData1: {},
				floorData2: {},
				floorData3: {}
			};
		},
		mounted() {
			this.getSwipers();
			this.getMenus();
			this.getFloorData();
			this.getMenuData();
		},
		methods: {
			//获取轮播图
			getSwipers() {
				// uni.request({
				// 	url: "http://localhost:4000/home/swiperdata",
				// 	success: (res) => {
				// 		// console.log("res", res);
				// 		this.swipers = res.data.message;
				// 	}
				// });

				// 	request("/home/swiperdata",{}).then((res)=>{
				// 		// console.log("res",res)
				// 		this.swipers = res;
				// 	}).catch(err=>{
				// 		// console.log('err',err)
				// 	})
				// },

				getSwiperApi().then((res) => {
					// console.log("res",res)
					this.swipers = res;
				}).catch(err => {
					// console.log('err',err)
				})
			},
			//获取菜单数据/catitems
			// getMenus(){
			// 	uni.request({
			// 		   url:"http://localhost:4000/home/catitems",
			// 		   success:(res)=>{
			// 			 // console.log("res",res)
			// 			   this.menus=res.data.message
			// 		   }
			// 	})
			// }

			getMenus() {
				// request("/home/catitems",{}).then((res)=>{
				// 	console.log('res',res)
				// 	this.menus=res;
				// }).catch(err=>{
				// 	// console.log('err',err)
				// })

				getMenusApi().then((res) => {
					// console.log('res',res)
					this.menus = res;
				}).catch(err => {
					// console.log('err',err)
				})
			},
			getFloorData() {
				getFloorDataApi().then((res) => {
					console.log('楼层',res);
					// console.log("ppp",res[0].floor_imgs[0],res[1].floor_imgs[0],res[2].floor_imgs[0],'oh',res[0])
					this.floorData1 = res[0];
					this.floorData2 = res[1];
					this.floorData3 = res[2];
				}).catch(err => {

				})
			},
			getMenuData(){
				getMenuDataApi().then((res)=>{
					console.log("底部数据",res)
				}).catch(err=>{
					
				})
			}
			



		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
	}

	.big-bottom {
		display: grid;
		grid-template-columns: repeat(2, 1fr);

		.bottom-item-1-1 {
			width: 333rpx;
			height: 248rpx;
			border: 1px solid red;
		}
		.item-text{
			font-size: 30rpx;
			color: rgb(87, 87, 87);
		}
		.sort-item{
			display: flex;
			font-size: 22rpx;
			image{
				height: 18rpx;
				width: 20rpx;
			}
		}
		.bottom-item-2-2 {
			width: 333rpx;
			height: 248rpx;
			border: 1px solid red;
		}
	}

	.big-img {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		.big-item-1 {
			width: 333rpx;
			height: 362rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.big-item-2 {
			width: 333rpx;
			height: 362rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.big-item-2-1 {
				width: 100%;
				height: 176rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.big-item-2-2 {
				width: 100%;
				height: 176rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.middle-box {
		padding: 32rpx;
		overflow: hidden;

		.swiper {
			margin-top: 40rpx;
		}
	}

	.header {
		height: 220rpx;
		width: 100%;
		background-image: url("@/static/@1/caipusousuo_slices/ditu .png");
		overflow: hidden;
		color: white;
		margin-bottom: 40rpx;

		.head-1 {
			font-size: 46rpx;
			margin-top: 70rpx;
			margin-left: 20rpx;
		}

		.head-2 {
			font-size: 28rpx;
			margin-left: 20rpx;
		}
	}


	.home {
		// padding: 20rpx;
		position: relative;

		.myimg {
			margin-left: 32rpx;
			height: 74rpx;
			width: 686rpx;
			border-radius: 40rpx;
			position: absolute;
			z-index: 99;
			left: 10rpx;
			top: 184rpx;
			background-color: white;
		}

		.menu-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 48rpx; //每行和每列之间的间距
		}

		.menu-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.text-1 {
				font-size: 24rpx;
			}
		}
	}
</style>
